@import "variables.less";
.tabs-scroller-left, .tabs-scroller-right {
  position: absolute;
  top: auto;
  bottom: 0px;
  width: 19px; /*2018-6-28 加宽*/
  font-size: 1px;
  display: none;
  cursor: pointer;
  border:none; /*去边框---下面定义*/
}
.tabs-header {
  padding-top: 0px;
  border-top-width: 0;
}
.tabs {
  height: @tabs-header-height;  
  padding-left: 0px;
  border-width: 0 0 0px 0;
  overflow: hidden;
  li {
    height: 35px; /*wanghc 2018-3-19  win7-ie11*/
    margin: 0px;
    &:not(:last-child)::after{
      content:'';
      display: inline-block;
      height:20px;
      width: 0;
      vertical-align: middle;
      // border-left: 1px solid #2A72B0;
      //border-right: 1px solid #70B5F1;
      border-left:1px solid @tabs-li-after-border-left-corlor;
      border-right:1px solid @tabs-li-after-border-right-corlor;
      margin-left: 1px;
    }
    &.tabs-selected{
      a.tabs-inner {
        background: #ffffff;
        border-top:3px solid @tabs-header-select-top-color;
        color: #000000;
        font-weight: normal;
        &:hover{
          background: #ffffff;
          color: #000000;
          font-weight: normal;
        }
      }
      &::after{
        //border-color:transparent;  
        content: none;
      }
      a.tabs-close{
        background: url(images/tabs_icons_2.png) no-repeat 0 0 ;
      }
    }
    a.tabs-inner {
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
      color:@tabs-header-font-color;
      background:@tabs-header-bgcolor;
      border-width:0;
      border-top:3px solid @tabs-header-bgcolor;
      filter: none;
      &:hover{
        border-top-color: @tabs-header-hover-bgcolor;
        background: @tabs-header-hover-bgcolor;
        color: @tabs-header-font-color;
        filter: none;
      }
      .tabs-title.tabs-closable{
        padding-right: 28px;
      }
      .tabs-icon{
        margin-top: -6px;
      }
      .tabs-title.tabs-with-icon{
        padding-left: 20px;
      }
    }
    a.tabs-close{
      background: url(images/tabs_icons_2.png) no-repeat -18px 0 ;
      margin-top:-7px;
      right:10px;
      height: 18px;
      width: 18px;
      opacity: 1.0;
      filter: alpha(opacity=100);
      //background-color: @tabs-header-bgcolor;
      &:hover{
        background: url(images/tabs_icons_2.png) no-repeat -36px 0 ;
      }
    }
  }
  /*tabs-brand no hover no pointer  cryze 2018-3-15*/
  li.tabs-brand{
    a.tabs-inner{
      cursor: default;
      &:hover{
        border-top-color: @tabs-header-bgcolor;
        background: @tabs-header-bgcolor;
        color: @tabs-header-font-color;
      }
    }
  }
}
/*.tabs li a.tabs-inner {
  color:@tabs-header-font-color;
  background:@tabs-header-bgcolor;
}*/
.tabs-title {
  font-size: @tabs-title-font-size;
}
.tabs-header-bottom .tabs li a.tabs-inner{
   -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.tabs-header-left .tabs li a.tabs-inner {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.tabs-header-right .tabs li a.tabs-inner {
  -moz-border-radius:0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.tabs-scroller-left {
  background: @tabs-header-bgcolor url('images/tabs_icons.png') no-repeat 4px center; /*2018-6-27 UI建议修改 1px->4px*/
}
.tabs-scroller-right {
  background: @tabs-header-bgcolor url('images/tabs_icons.png') no-repeat -12px center; /*2018-6-27 UI建议修改 -15px->-12px*/
}

.tabs-header-bottom .tabs li.tabs-selected a.tabs-inner {
  background: #ffffff ;
}
.tabs-header-left .tabs li.tabs-selected a.tabs-inner {
  background: #ffffff;
}
.tabs-header-right .tabs li.tabs-selected a.tabs-inner {
  background: #ffffff;
}

.tabs-header,
.tabs-tool {
  background-color: @tabs-header-bgcolor;  /*modify*/
}
.tabs-header-plain {
  background: transparent;
}
.tabs-header,
.tabs-scroller-left,
.tabs-scroller-right,
.tabs-tool,
.tabs,
.tabs-panels,
.tabs li a.tabs-inner,
.tabs li.tabs-selected a.tabs-inner,
.tabs-header-bottom .tabs li.tabs-selected a.tabs-inner,
.tabs-header-left .tabs li.tabs-selected a.tabs-inner,
.tabs-header-right .tabs li.tabs-selected a.tabs-inner {
  border-color:@tabs-header-bgcolor;
}
.tabs li.tabs-selected a.tabs-inner {
  border-left:0px solid #ffffff;
  border-bottom: 0px solid #ffffff;
}
.tabs li.tabs-selected a.tabs-inner{
  border-top:3px solid @tabs-header-select-top-color;
}

.tabs-p-tool{
  a:hover{
    background-color: @tabs-header-arrow-hover-bgcolor;
  }
}
.tabs li a:hover.tabs-color{
  background-color: @tabs-header-arrow-hover-bgcolor;
}
.tabs-scroller-over{
  background-color: @tabs-header-arrow-hover-bgcolor;
}
//蓝色 下
.tabs-header-bottom{
  &.tabs-header{
    border-bottom-width: 0;
  }
  padding:0;
  .tabs{
    height: @tabs-header-height;
    padding: 0px;
    border-width: 0 0 0px 0;
    li{
      height: 35px; /*wanghc 2018-3-19  win7-ie11*/
      margin: 0px;
      a.tabs-inner{
        border-top:0px;
        border-bottom:3px solid @tabs-header-bgcolor;
        &:hover{
          border-top: 0px solid #eaf2ff;
          border-bottom-color: @tabs-header-hover-bgcolor;
          background: @tabs-header-hover-bgcolor;
          color: @tabs-header-font-color;
          filter: none;
        }
        .tabs-icon{
          margin-top: -9px;
        }
      }
      a.tabs-close{
        margin-top: -10px;
      }
    }
    li.tabs-selected{
      a.tabs-inner {
        border-left:0px solid #ffffff;
        border-top: 0px solid #ffffff;
        border-top:0px;
        border-bottom:3px solid @tabs-header-select-top-color;
        &:hover{
          background: #ffffff;
          color: #000000;
        }
      }
    }
  }
}
//蓝色 左
.tabs-header-left{
  &.tabs-header{
    border-left:0;
    border-top:1px solid @tabs-header-bgcolor;
  }
  padding:0;
  .tabs{
    //height: @tabs-header-height;   /*cryze 2018-8-2*/
    padding: 0px;
    border-width: 0 0 0px 0;
    li{
      height: 35px; /*wanghc 2018-3-19  win7-ie11*/
      float:left;
      margin: 0px;
      &::after{
        content: none;
      }
      a.tabs-inner{
        border: 0 solid @tabs-header-bgcolor;
        //border-top:1px;
        //border-bottom: 2px;
        border-left:3px solid @tabs-header-bgcolor;
        &:hover{
          border-right: 0px solid #eaf2ff;
          border-left-color: @tabs-header-hover-bgcolor;
          background: @tabs-header-hover-bgcolor;
          color: @tabs-header-font-color;
          filter: none;
        }
        .tabs-icon{
          margin-top: -8px;
        }
      }
      a.tabs-close{
        margin-top: -9px;
      }
    }
    li.tabs-selected{
      a.tabs-inner {
        border: 0 solid #ffffff;
        //border-top:1px;
        //border-bottom: 2px;
        border-left:3px solid @tabs-header-select-top-color;
        &:hover{
          background: #ffffff;
          color: #000000;
        }
      }
    }
  }
}
//蓝色 右
.tabs-header-right{
  &.tabs-header{
    border-right: 0;
    border-top:1px solid @tabs-header-bgcolor;
  }
  padding:0;
  .tabs{
  /*  height: @tabs-header-height;*/
    padding: 0px;
    border-width: 0 0 0px 0;
    li{
      height: 35px; /*wanghc 2018-3-19  win7-ie11*/
      float:right;
      margin: 0px;
      &::after{
        content: none;
      }
      a.tabs-inner{
        border: 0 solid @tabs-header-bgcolor;
        //border-top:1px;
        //border-bottom: 2px;
        border-right:3px solid @tabs-header-bgcolor;
        &:hover{
          border-left: 0px solid #eaf2ff;
          border-right-color: @tabs-header-hover-bgcolor;
          background: @tabs-header-hover-bgcolor;
          color: @tabs-header-font-color;
          filter: none;
        }
        .tabs-icon{
          margin-top: -8px;
        }
      }
      a.tabs-close{
        margin-top: -9px;
      }
    }
    li.tabs-selected{
      a.tabs-inner {
        border: 0 solid #ffffff;
        //border-top:1px;
        //border-bottom: 2px;
        border-right:3px solid @tabs-header-select-top-color;
        &:hover{
          background: #ffffff;
          color: #000000;
        }
      }
    }
  }
}

/*--tabs-gray--*/
.tabs-container.tabs-gray {
  .tabs-scroller-left {
    border-color:@tabs-header-gray-bgcolor;
    background: @tabs-header-gray-bgcolor url('images/tabs_icons_gray.png') no-repeat 4px center; /*2018-6-27 UI建议修改 1px->4px*/
    border-bottom:1px solid #cccccc;
    border-right:1px solid #cccccc;
  }
  .tabs-scroller-right {
    border-color:@tabs-header-gray-bgcolor;
    background: @tabs-header-gray-bgcolor url('images/tabs_icons_gray.png') no-repeat -12px center; /*2018-6-27 UI建议修改 -15px->-12px*/
    border-bottom:1px solid #cccccc;
    border-left:1px solid #cccccc;
  }
  .tabs-p-tool{
    a:hover{
      background-color: @tabs-header-gray-arrow-hover-bgcolor;
    }
  }
  .tabs-scroller-over{
    background-color: @tabs-header-gray-arrow-hover-bgcolor;
  }
  .tabs-tool{
    border-left: 0px;
    border-color:@tabs-header-gray-border;
    border-right:1px solid @tabs-header-gray-bgcolor;
    .l-btn{
      margin:1px;
    }
  }
  .tabs-header,.tabs-tool{
    background-color:@tabs-header-gray-bgcolor;
  }
  .tabs-panels,.tabs-header{
    border-color:@tabs-header-gray-border;
  }
  .tabs-header{
    border:1px solid @tabs-header-gray-border;
    border-bottom: 0;
    .tabs{
      border:0;
      border-bottom:1px solid @tabs-header-gray-border;
    }
  }

  .tabs{
    overflow: visible;
    li{
      border:0;
      height: 35px;
      overflow: hidden; /*2020-2-27 overflow-y -> overflow*/
      border-right: 1px solid #cccccc;
      &::after{
        content: none;
      }
      a{
        &.tabs-inner{
          color:@tabs-header-gray-font-color;
          background-color:@tabs-header-gray-bgcolor; /*modify*/
          border-color: @tabs-header-gray-bgcolor;
          &:hover{
            background:@tabs-header-gray-hover-bgcolor;
            color:@tabs-header-gray-font-color;
            border-color: @tabs-header-gray-hover-bgcolor;
            filter: none;
            //border-bottom: 1px solid @tabs-header-gray-hover-bgcolor;
          }
        }

      }
      a.tabs-close{
        background: url(images/tabs_icons_2.png) no-repeat 0 0 ;
      }
      .tabs-close:hover{
        background: url(images/tabs_icons_2.png) no-repeat -36px 0 ;
      }
    }
    li.tabs-selected{
      height: 36px;
      a.tabs-inner{
        color:@tabs-header-gray-select-font-color;
        background-color:@tabs-header-gray-select-bgcolor; /*modify*/
        border-color: @tabs-header-gray-select-top-color;
        &:hover{
          border-color: @tabs-header-gray-select-top-color;
        }
      }
      a.tabs-close{
        background: url(images/tabs_icons_2.png) no-repeat 0 0 ;
      }
      .tabs-close:hover{
        background: url(images/tabs_icons_2.png) no-repeat -36px 0 ;
      }
    }
    /*tabs-brand no hover no pointer  cryze 2018-3-15*/
    li.tabs-brand{
      a.tabs-inner{
        cursor: default;
        &:hover{
          border-color: @tabs-header-gray-bgcolor;
          background: @tabs-header-gray-bgcolor;
          color:@tabs-header-gray-font-color;
        }
      }
    }
  }
}
/*--tabs-gray--*/
.tabs-container.tabs-gray {
  .tabs-header-bottom{   //灰色 底部
    .tabs-scroller-left {
      border-color:@tabs-header-gray-bgcolor;
      background: @tabs-header-gray-bgcolor url('images/tabs_icons_gray.png') no-repeat 4px center; /*2018-6-27 UI建议修改 1px->4px*/
      border-top:1px solid #cccccc;
      border-right:1px solid #cccccc;
    }
    .tabs-scroller-right {
      border-color:@tabs-header-gray-bgcolor;
      background: @tabs-header-gray-bgcolor url('images/tabs_icons_gray.png') no-repeat -12px center; /*2018-6-27 UI建议修改 -15px->-12px*/
      border-top:1px solid #cccccc;
      border-left:1px solid #cccccc;
    }
    &.tabs-header{
      border:1px solid @tabs-header-gray-border;
      border-top: 0;
      .tabs{
        border:0;
        border-top:1px solid @tabs-header-gray-border;
      }
    }
    padding:0;
    .tabs{
      height: @tabs-header-height;
      padding: 0;
      li{
        border:0;
        margin: 0;
        height: 35px;
        overflow: hidden;
        border-right: 1px solid #cccccc;
        &::after{
          content: none;
        }
      }
      li.tabs-selected{
        height: 36px;
        margin-top: -1px;
        a.tabs-inner {
          color:@tabs-header-gray-select-font-color;
          background-color:@tabs-header-gray-select-bgcolor; /*modify*/
          border-color: @tabs-header-gray-select-top-color;
          &:hover{
            border-color: @tabs-header-gray-select-top-color;
          }
        }
      }
    }
  }
  
  .tabs-header-left{   //灰色 左侧
    &.tabs-header{
      border:1px solid @tabs-header-gray-border;
      border-right: 0;
      border-radius: 0;
      .tabs{
        border:0;
        border-right:1px solid @tabs-header-gray-border;
        height: 100%;
      }
    }
    padding:0;
    .tabs{
      height: @tabs-header-height;
      padding: 0px;
      li{
        height: 36px;
        float:left;
        margin: 0px;
        border: 0;
        border-bottom: 1px solid @tabs-header-gray-border;
        border-right: 1px solid @tabs-header-gray-border;
        &::after{
          content: none;
        }
      }
      li.tabs-selected{
        border-right: 1px solid #fff;
      }
    }
  }

  .tabs-header-right{   //灰色 右侧
    &.tabs-header{
      border:1px solid @tabs-header-gray-border;
      border-left: 0;
      border-radius: 0;
      .tabs{
        border:0;
        border-left:1px solid @tabs-header-gray-border;
        height: 100%;
      }
    }
    padding:0;
    .tabs{
      height: @tabs-header-height;
      padding: 0px;
      li{
        height: 36px;
        float:left;
        margin: 0 0 0 -1px;
        border: 0;
        border-bottom: 1px solid @tabs-header-gray-border;
        border-left: 1px solid @tabs-header-gray-border;
        &::after{
          content: none;
        }
      }
      li.tabs-selected{
        border-left: 1px solid #fff;
      }
    }
  }
}

.tabs-gray{
  .tabs-header{
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    &.tabs-header-bottom{
      -moz-border-radius: 0 0 4px 4px ;
      -webkit-border-radius: 0 0 4px 4px ;
      border-radius: 0 0 4px 4px ;
      &.tabs-header-noborder{ /*border:false*/
        border: 0;
      }
    }
    &.tabs-header-left{
      -moz-border-radius: 4px 0 0 4px ;
      -webkit-border-radius: 4px 0 0 4px ;
      border-radius: 4px 0 0 4px ;
      &.tabs-header-noborder{ /*border:false*/
        border: 0;
      }
    }
    &.tabs-header-right{
      -moz-border-radius: 0 4px 4px 0 ;
      -webkit-border-radius: 0 4px 4px 0 ;
      border-radius:  0 4px 4px 0 ;
      &.tabs-header-noborder{ /*border:false*/
        border: 0;
      }
    }
    &.tabs-header-noborder{ /*border:false*/
      border: 0;
    }
  }
  .tabs-panels{
    -moz-border-radius: 0 0 4px 4px ;
    -webkit-border-radius: 0 0 4px 4px ;
    border-radius: 0 0 4px 4px ;
    &.tabs-panels-noborder{ /*border:false*/
      border: 0;
    }
    &.tabs-panels-top{
      -moz-border-radius: 4px 4px 0 0;
      -webkit-border-radius: 4px 4px 0 0;
      border-radius: 4px 4px 0 0;
      &.tabs-panels-noborder{ /*border:false*/
        border: 0;
      }
    }
    &.tabs-panels-right{
      -moz-border-radius: 0 4px 4px 0 ;
      -webkit-border-radius: 0 4px 4px 0 ;
      border-radius:  0 4px 4px 0 ;
      &.tabs-panels-noborder{ /*border:false*/
        border: 0;
      }
    }
    &.tabs-panels-left{
      -moz-border-radius: 4px 0 0 4px ;
      -webkit-border-radius: 4px 0 0 4px ;
      border-radius: 4px 0 0 4px ;
      &.tabs-panels-noborder{ /*border:false*/
        border: 0;
      }
    }
    &.tabs-panels-noborder{ /*border:false*/
      border: 0;
    }
  }
}
.tabs-keywords{
  .tabs-header{
    background-color: transparent;
    border: 0px;
  }
  .tabs-panels{
    border:0px;
  }
  .tabs li {
    &::after{
      content: none;
    }
    a.tabs-inner{
      border-radius: 4px;
      border: 0px;
      background-color: transparent;
      color: @keywords-fontcolor;
    }
    a.tabs-inner:hover {
      background: @keywords-bgcolor;
    }
  }
  .tabs li.tabs-selected{
    a.tabs-inner{
      background: @keywords-bgcolor;
    }
  }
}
/*gray 且选中蓝条在下方*/
.tabs-gray-btm{
  .tabs-header, .tabs-tool{
    background-color: @tabs-header-gray-bgcolor;
    border-color: @tabs-header-gray-bgcolor;
  }
  .tabs-panels{
    border-color:#ffffff;
  }  
  .tabs{
    border-bottom:1px solid #cccccc; /*[3173471] [3195938]*/ 
  }
  .tabs li {
    height: auto; /*以便关闭按钮在不同高度的tabheight下居中*/
  }
  .tabs li a.tabs-inner{
    background-color:@tabs-header-gray-bgcolor;
    border-top: 0px solid @tabs-header-gray-bgcolor;
    border-bottom: 3px solid @tabs-header-gray-bgcolor;
    color: #000000;
    &:hover{
      background: @tabs-header-gray-select-bgcolor;
      color: #000000;
      filter: none;
      border-bottom: 3px solid @tabs-header-gray-select-top-color;
    }
  }
  .tabs li.tabs-selected a.tabs-inner {
    border-top: 0px solid @tabs-header-gray-bgcolor;
    border-bottom: 3px solid @tabs-header-gray-select-top-color;
    background: @tabs-header-gray-select-bgcolor;
  }
  .tabs li:not(:last-child)::after {
    content: '';
    display: inline-block;
    height: 20px;
    width: 0;
    vertical-align: middle;
    border-left: 1px solid @tabs-header-gray-border;
    border-right: 1px solid @tabs-header-gray-bgcolor;
    margin-left: 1px;
  }
  .tabs li a.tabs-close {
    background-position-x: 0;
    margin-top:-9px; /*以便关闭按钮在不同高度的tabheight下居中*/
    &:hover{
      background: url(images/tabs_icons_2.png) no-repeat -36px 0;
    }
  }
}
